<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue条件渲染</title>
    <script src="https://unpkg.com/vue@3.4.0"></script>
    <style>
      body {
        font-family: Arial, sans-serif;
        padding: 20px;
      }
      .demo-section {
        margin: 20px 0;
        padding: 15px;
        border: 1px solid #ddd;
      }
      .user-info {
        background: #f0f8ff;
        padding: 10px;
      }
      .warning {
        background: #fff3cd;
        padding: 10px;
        color: #856404;
      }
      .error {
        background: #f8d7da;
        padding: 10px;
        color: #721c24;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h2>Vue条件渲染演示</h2>

      <!-- v-if基础用法 -->
      <div class="demo-section">
        <h3>1. v-if基础用法</h3>
        <button @click="showMessage = !showMessage">{{showMessage ? '隐藏' : '显示'}}消息</button>
        <p v-if="showMessage">这是一条消息！</p>
      </div>

      <!-- v-if、v-else-if、v-else -->
      <div class="demo-section">
        <h3>2. 多重条件渲染</h3>
        <input type="number" v-model.number="score" placeholder="输入分数(0-100)" />
        <div v-if="score >= 90" class="user-info">优秀！分数：{{score}}</div>
        <div v-else-if="score >= 80" class="warning">良好！分数：{{score}}</div>
        <div v-else-if="score >= 60">及格！分数：{{score}}</div>
        <div v-else-if="score >= 0" class="error">不及格！分数：{{score}}</div>
        <div v-else>请输入有效分数</div>
      </div>

      <!-- v-show与v-if对比 -->
      <div class="demo-section">
        <h3>3. v-show与v-if对比</h3>
        <button @click="toggleDisplay">切换显示</button>
        <p>切换次数：{{toggleCount}}</p>

        <div style="display: flex; gap: 20px">
          <div>
            <h4>v-if (创建/销毁元素)</h4>
            <div v-if="isVisible" style="background: lightblue; padding: 10px">
              v-if内容 - 每次切换都会重新创建
            </div>
          </div>

          <div>
            <h4>v-show (切换CSS display)</h4>
            <div v-show="isVisible" style="background: lightgreen; padding: 10px">
              v-show内容 - 始终存在DOM中
            </div>
          </div>
        </div>
      </div>

      <!-- 模板元素分组 -->
      <div class="demo-section">
        <h3>4. template元素分组</h3>
        <button @click="showUserInfo = !showUserInfo">切换用户信息</button>
        <template v-if="showUserInfo">
          <h4>用户信息</h4>
          <p>姓名：张三</p>
          <p>邮箱：zhangsan@example.com</p>
          <p>电话：138****8888</p>
        </template>
      </div>
    </div>

    <script>
      const { createApp, ref } = Vue

      const App = {
        setup() {
          const showMessage = ref(false)
          const score = ref(85)
          const isVisible = ref(true)
          const toggleCount = ref(0)
          const showUserInfo = ref(false)

          const toggleDisplay = () => {
            isVisible.value = !isVisible.value
            toggleCount.value++
          }

          return {
            showMessage,
            score,
            isVisible,
            toggleCount,
            showUserInfo,
            toggleDisplay
          }
        }
      }

      createApp(App).mount('#app')
    </script>
  </body>
</html>
